<template>
    <div ref="scroll" style="min-height: 100vh;">
        <div class="home">
          <!-- 搜索 -->
<!--          <div class="search-contain">-->
<!--              <router-link to="/search">-->
<!--                  <van-search shape="round" input-align="center" class="van-search" left-icon="" readonly>-->
<!--                      <template #right-icon>-->
<!--                          <div class="search-placeholder">-->
<!--                              <img :src="searchIcon" alt="" class="search-icon" />-->
<!--                              <div>{{ $t("找货源/商品/供应商/求购") }}</div>-->
<!--                          </div>-->
<!--                      </template>-->
<!--                  </van-search>-->
<!--              </router-link>-->
<!--            </div>-->
            <!-- banner -->
            <div class="banner-div">
                <van-skeleton :row="1" class="big_picture skeleton" :loading="loading.banner">
                    <van-swipe  @change="onChange" class="my-swipe" style="direction: ltr;" :autoplay="3000"
                        :show-indicators="false" v-if="banner.length !== 0" :touchable="false" ref="swiperB">
                        <van-swipe-item v-for="(item, index) in banner" :key="index" >
                            <van-image :src="item.imgUrl" @click="handleBannerJump(item)" fit="cover"
                                class="swiper_image">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20" />
                                </template>
                            </van-image>
                        </van-swipe-item>
                    </van-swipe>
                  <div class="banner_btn">
                    <div class="left_btn" @click="prev">
                      <van-icon name="arrow-left" color="#fff" size="18" />
                    </div>
                    <div class="right_btn" @click="next">
                      <van-icon name="arrow" color="#fff" size="18" />
                    </div>
                  </div>
                </van-skeleton>
              <div class="dot-container">
                <span
                  v-for="(image, index) in banner"
                  :key="index"
                  :class="{ 'active-dot': checkActiveDot(index) }"
                  class="dot"
                  @click="changeIndex(index)"
                >
                </span>
              </div>
            </div>

            <!--大图分类-->
            <div class="dt_classify">
              <div class="dt_row1" @click="handleJump('1')">
                <img src="@/assets/image/index/datu1.png" alt="">
                <div class="comment">
                  <div>{{ $t("潮女穿搭，引领风尚") }}</div>
                  <div>{{ $t("查看更多") }}
                    <span>→</span></div>
<!--                  <img src="@/assets/image/index/rightR.png" alt="">-->
                </div>
              </div>
              <div class="dt_row1" @click="handleJump('1')">
                <img src="@/assets/image/index/datu2.png" alt="">
                <div class="comment">
                  <div>{{ $t("独特视角，彰显个性") }}</div>
                  <div>{{ $t("查看更多") }} <span>→</span></div>
                </div>
              </div>
              <div class="dt_row1" style="height: 126px" @click="handleJump('2')">
                <img src="@/assets/image/index/datu3.png" alt="">
                <div class="comment">
                  <div>{{ $t("一包在手，品味非凡") }}</div>
                  <div>{{ $t("查看更多") }} <span>→</span></div>
                </div>
              </div>
              <div class="dt_row1" style="height: 383px" @click="handleJump('3')">
                <img src="@/assets/image/index/datu4.png" alt="">
                <div class="comment">
                  <div>{{ $t("潮流无界，型男出彩") }}</div>
                  <div>{{ $t("查看更多") }} <span>→</span></div>
                </div>
              </div>
            </div>
            <!-- 热门分类 -->
          <div style="padding: 0 15px">
            <div class="daohang_con">
              <div class="daohang_title">{{ $t("热门分类") }}</div>
              <img src="@/assets/image/index/download.png" alt="">
            </div>
            <div class="ks_daohang">
                <van-skeleton :row="15" class="list_skeleton skeleton" :loading="loading.list">
                    <swiper ref="mySwiper" class="swiper" :options="swiperOptions">
                        <swiper-slide v-for="item in categoryList" :key="item.categoryId" class="ks_daohang-item">
                            <div class="ks_danghang_img_contain" @click="openClass(item)">
                                <img v-lazy="item.iconImg || $defaultGoodsImage" class="ks_danghang_img"
                                    :src="item.iconImg || $defaultGoodsImage" />
                              <div class="ks_daohang-item-text nowrap2">{{ item.name }}</div>
                            </div>

                        </swiper-slide>
                    </swiper>
                </van-skeleton>
            </div>

            </div>
            <!--  新品上市 /每日上新 -->
          <div style="padding: 20px 15px 0px" v-if="dailyNewArrivalList.length > 0">
            <div class="daohang_con">
              <div class="daohang_title">{{ $t("新品上市") }}</div>
              <img src="@/assets/image/index/download.png" alt="">
            </div>
            <div class="recommended-store">
<!--              <van-skeleton :row="1" class="newest_skeleton skeleton" :loading="loading.newest">-->
<!--                <swiper class="swiper" :options="swiperOptions">-->
<!--                  <swiper-slide v-for="(item, index) in dailyNewArrivalList" :key="index" class="zhuanjia-item2">-->
<!--                    <div class="img-div" @click="openProduct(item)">-->
<!--                      <img v-lazy="item.imgUrl1 || $defaultGoodsImage" class="img"-->
<!--                           :src="item.imgUrl1 || $defaultGoodsImage" />-->
<!--                    </div>-->
<!--                    <div class="t1">-->
<!--                      ${{ priceFormat(item?.discountPrice || item.sellingPrice) }}-->
<!--                    </div>-->
<!--                  </swiper-slide>-->
<!--                </swiper>-->
<!--              </van-skeleton>-->
              <div class="recommended-store-product">
                <div v-for="item in dailyNewArrivalList" @click="openProduct(item)" :key="item.key"
                     class="recommended-store-product-item">
                  <div class="img-div">
                    <img :src="item.imgUrl1 || $defaultGoodsImage" class="img" />
                  </div>

                  <div class="content">
                    <div class="describe">
                      {{ $textOmit(item.name) }}
                    </div>
                            <span class="price">${{
                                priceFormat(item.discountPrice)
                                  ? priceFormat(item.discountPrice)
                                  : priceFormat(item.sellingPrice)
                              }}</span>
                    <p>{{ $t("销量") }} {{ priceFormatInt(item.soldNum) }}</p>
                    <!-- <p>{{$t('浏览量')}}:{{ item.pageviews }}</p> -->

                  </div>
                  <!-- 活动折扣 -->
<!--                  <div class="discount_box" v-if="item.discountRatio >= 0.01">-->
<!--                    <span>{{ (item.discountRatio * 100).toFixed(0) }}%</span>-->
<!--                    <span>OFF</span>-->
<!--                  </div>-->
                  <div class="jg_sc">
                    <div @click.stop="addCart(item)"><i class="el-icon-shopping-cart-full"></i></div>
                    <div @click.stop="addKeepGoods(item)">
                      <i v-if="item.isKeep===1" class="el-icon-star-on"></i>
                      <i v-else class="el-icon-star-off"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--加入我们-->
          <div class="join_us">
            <img src="@/assets/image/index/Settlement.png" alt="">
            <div class="join_us_text">
              <div class="top_text">{{ $t('成为商家') }}</div>
              <div class="top_text">{{ $t('共分佣金') }}</div>
              <div class="yj_text">{{ $t('最高') }} $100,000</div>
              <div class="jr_btn" @click="merchantJump">{{ $t('立即加入') }}</div>
            </div>
          </div>


            <!-- 推荐商品 -->
          <div style="padding: 20px 15px 0px" v-if="productList.length > 0">
            <div class="daohang_con">
              <div class="daohang_title">{{ $t("推荐商品") }}</div>
              <img src="@/assets/image/index/download.png" alt="">
            </div>
            <div class="recommended-store">
              <div class="recommended-store-product">
                <div v-for="item in productList" @click="openProduct(item)" :key="item.key"
                     class="recommended-store-product-item">
                  <div class="img-div">
                    <img :src="item.imgUrl1 || $defaultGoodsImage" class="img" />
                  </div>

                  <div class="content">
                    <div class="describe">
                      {{ $textOmit(item.name) }}
                    </div>
                    <span class="price">${{
                        priceFormat(item.discountPrice)
                          ? priceFormat(item.discountPrice)
                          : priceFormat(item.sellingPrice)
                      }}</span>
                    <p>{{ $t("销量") }} {{ priceFormatInt(item.soldNum) }}</p>
                    <!-- <p>{{$t('浏览量')}}:{{ item.pageviews }}</p> -->

                  </div>
                  <!-- 活动折扣 -->
<!--                  <div class="discount_box" v-if="item.discountRatio >= 0.01">-->
<!--                    <span>{{ (item.discountRatio * 100).toFixed(0) }}%</span>-->
<!--                    <span>OFF</span>-->
<!--                  </div>-->
                  <div class="jg_sc">
                    <div @click.stop="addCart(item)"><i class="el-icon-shopping-cart-full"></i></div>
                    <div @click.stop="addKeepGoods(item)">
                      <i v-if="item.isKeep===1" class="el-icon-star-on"></i>
                      <i v-else class="el-icon-star-off"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
<!--            <div class="banner-product">-->
<!--                <van-skeleton :row="4" class="product_skeleton skeleton" :loading="loading.product">-->
<!--                    <van-swipe @change="handleChangeSwiper">-->
<!--                        <van-swipe-item v-for="page in prodctPage" :key="page">-->
<!--                            <div class="swipe-product">-->
<!--                                <div class="swipe-product-item" style="background: #fff" v-for="item in productList.filter(-->
<!--                                    (it, n) => (page - 1) * 4 <= n && n < page * 4-->
<!--                                )" @click="openProduct(item)" :key="item.id">-->
<!--                                    <div class="img-div">-->
<!--                                        <img :src="item.imgUrl1 || $defaultGoodsImage" class="img" />-->
<!--                                    </div>-->
<!--                                    <div class="content">-->
<!--                                        <span class="price">-->
<!--                                            ${{ priceFormat(item.discountPrice || item.sellingPrice) }}-->
<!--                                        </span>-->
<!--                                        <p class="sold">{{ $t('销量') }} {{ priceFormatInt(item?.soldNum) }}</p>-->
<!--                                        <p class="describe">-->
<!--                                            {{ $textOmit(item.name, 24) }}-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 活动折扣 &ndash;&gt;-->
<!--                                    <div class="discount_box" v-if="item.discountRatio >= 0.01">-->
<!--                                        <span>{{ (item.discountRatio * 100).toFixed(0) }}%</span>-->
<!--                                        <span>OFF</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </van-swipe-item>-->
<!--                        <template #indicator>-->
<!--                            <ul class="indicators indicator">-->
<!--                                <li v-for="(item, index) in prodctPage" :key="index"-->
<!--                                    :class="{ active: checkActive(index) }">-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </template>-->
<!--                    </van-swipe>-->
<!--                </van-skeleton>-->

<!--            </div>-->
          </div>
            <!-- 推荐店铺 -->
          <div style="padding: 0 15px">
            <div class="daohang_con">
              <div class="daohang_title">{{ $t("推荐店铺") }}</div>
              <img src="@/assets/image/index/download.png" alt="">
            </div>
            <div class="ks_daohang">
              <van-skeleton :row="15" class="list_skeleton skeleton" :loading="loading.list">
                <swiper ref="mySwiper" class="swiper" :options="swiperOptions">
                  <swiper-slide v-for="item in recomendedStoreShopList" :key="item.categoryId" class="ks_daohang-item">
                    <div class="ks_danghang_img_contain shop_data" @click="jumpShop(item)">
                      <img v-lazy="item.avatar" class="ks_danghang_img"
                           :src="item.avatar" />
                      <div class="ks_daohang-item-text nowrap2">{{ item.name }}</div>
                      <div class="store_info">{{ $t("商品") }}: {{ priceFormatInt(item.sellerGoodsNum, true) }}</div>
                      <div class="store_info">{{ $t("销量") }}: {{ priceFormatInt(item.soldNum, 1) }}</div>
                      <div class="store_info">{{ $t("好评率") }}: {{ Math.floor(item.highOpinion * 100) || 100 }}%</div>
                    </div>

                  </swiper-slide>
                </swiper>
              </van-skeleton>
            </div>

          </div>

<!--            <div class="Member-text" style="display: flex; justify-content: center; align-items: center">-->
<!--                <div style="flex: 1">{{ $t("推荐店铺") }}</div>-->
<!--            </div>-->
<!--            <div class="recommended-store">-->
<!--                <van-skeleton :row="4" class="product_skeleton skeleton" :loading="loading.shop">-->
<!--                    <div v-for="item in recomendedStoreShopList" :key="item.key" class="recommended-store-shop-item">-->
<!--                        <div class="top">-->
<!--                            <div class="left-img">-->
<!--                                <img :src="item.avatar" class="img" />-->
<!--                            </div>-->

<!--                            <div class="content">-->
<!--                                <div class="left">-->
<!--                                    <span class="title">{{ item.name }}</span>-->
<!--                                    <p class="fallow">-->
<!--                                        {{ $t("关注") }}: {{ priceFormatInt((+item?.fake || 0) + (+item?.focusNum || 0),-->
<!--                                            true)-->
<!--                                        }}-->
<!--                                    </p>-->
<!--                                    <p>{{ $t("商品") }}: {{ priceFormatInt(item.sellerGoodsNum, true) }}</p>-->
<!--                                    &lt;!&ndash; <p>{{ $t("浏览") }}:{{ item.browse }}</p> &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div :class="['button', ['Laz', 'ShoppingMall', 'INT Overstock', 'TikTok-Wholesale', 'AntMall'].includes(itemName) && 'distinguish_btn']"-->
<!--                                    @click="jumpShop(item)" :style="buttonStyle">-->
<!--                                    {{ $t("访问商店") }} &nbsp;>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="bottom">-->
<!--                            <span>{{ $t("好评率") }}: {{ Math.floor(item.highOpinion * 100) || 100 }}%</span>-->
<!--                            <span>{{ $t("卖出") }}: {{ priceFormatInt(item.soldNum, 1) }}</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </van-skeleton>-->
<!--            </div>-->
            <!-- 推荐店铺 -->

            <!-- app下载 -->
<!--            <template v-if="isShelves">-->
<!--                <div v-if="itemName !== 'TikTok-Wholesale'">-->
<!--                    <div class="download_wrap" v-if="isApp">-->
<!--                        <div class="down_title">{{ itemName == 'Hive' ? $t('电商批发商城') : $t('跨境电商批发商城') }}</div>-->
<!--                        <div class="sub_title">{{ $t('品牌特卖/折扣不停') }}</div>-->
<!--                        &lt;!&ndash; <div class="btns">-->
<!--                            <div class="btn" @click="handleDownload(0)" v-if="itemName != 'Hive'">-->
<!--                                <img src="@/assets/image/index/anzhuo.png" alt="">-->
<!--                                <span>{{ $t('安卓下载') }}</span>-->
<!--                            </div>-->
<!--                            <div class="btn" @click="handleDownload(1)" v-if="itemName != 'Hive'">-->
<!--                                <img src="@/assets/image/index/ios.png" alt="">-->
<!--                                <span>{{ $t('苹果下载') }}</span>-->
<!--                            </div>-->
<!--                        </div> &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </template>-->


            <!-- 热销产品 -->
          <div style="padding: 20px 15px 0px" v-if="recomendedStoreProductList.length > 0">
            <div class="daohang_con">
              <div class="daohang_title">{{ $t("热销产品") }}</div>
              <img src="@/assets/image/index/download.png" alt="">
            </div>
            <div class="recommended-store">
                <div class="recommended-store-product">
                    <div v-for="item in recomendedStoreProductList" @click="openProduct(item)" :key="item.key"
                        class="recommended-store-product-item">
                        <div class="img-div">
                            <img :src="item.imgUrl1 || $defaultGoodsImage" class="img" />
                        </div>

                        <div class="content">
                          <div class="describe">
                            {{ $textOmit(item.name) }}
                          </div>
                            <span class="price">${{
                                priceFormat(item.discountPrice)
                                    ? priceFormat(item.discountPrice)
                                    : priceFormat(item.sellingPrice)
                            }}</span>
                            <p>{{ $t("销量") }}:{{ priceFormatInt(item.soldNum) }}</p>
                            <!-- <p>{{$t('浏览量')}}:{{ item.pageviews }}</p> -->

                        </div>
                        <!-- 活动折扣 -->
<!--                        <div class="discount_box" v-if="item.discountRatio >= 0.01">-->
<!--                            <span>{{ (item.discountRatio * 100).toFixed(0) }}%</span>-->
<!--                            <span>OFF</span>-->
<!--                        </div>-->
                      <div class="jg_sc">
                        <div @click.stop="addCart(item)"><i class="el-icon-shopping-cart-full"></i></div>
                        <div @click.stop="addKeepGoods(item)">
                          <i v-if="item.isKeep===1" class="el-icon-star-on"></i>
                          <i v-else class="el-icon-star-off"></i>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
          </div>

            <!-- <div style="width: 100%; height: 56px"></div> -->
          <!--加入我们-->
          <VJoinUs />
        </div>
        <transition name="fade">
            <!-- <img class="to_top" v-show="isShowTopBtn" @click="handleToTop" src="@/assets/image/commodity/dingbu.png" /> -->
            <van-icon v-show="isShowTopBtn" @click="handleToTop" class="to_top" class-prefix="icon"
                name="huidaodingbu" />
        </transition>

        <Footer />
        <AddCart ref="cartRef" />
    </div>
</template>
<script>
// import HeahNavigation from "@/components/HeahNavigation"
import {
  Search,
  Swipe,
  SwipeItem,
  NoticeBar,
  Skeleton,
  Image as VanImage,
  loading,
  Dialog,
  Overlay,
  PasswordInput,
  NumberKeyboard,
  Badge,
  Icon, Toast
} from "vant";
import { shouyexinxi_post, huoquyue_post } from "@/API/user";
import { apiQueryMessages } from "@/API/common";
import { apiGetNewGoods, apiGetRecommendGoods } from '@/API/home'
import Footer from '@/components/Footer'
import AddCart from "./components/addCart.vue"
import {
    home_index,
    home_category,
    home_sellerGoods,
    getSellerList,
    apiGetBannerList
} from "@/API/home";
import { mapGetters } from "vuex";
// import { Skeleton } from "vant";
import { priceFormat, priceFormatInt, isLogin } from "@/utils/utis";
import {keepGoods, keepGoodsDel} from "@/API/commodity";
import VMenu from "@/components/base/VMenu.vue";

export default {
    name: "HomePage",
    components: {
      VMenu,
        // HeahNavigation,
        Footer,
      AddCart,
        [Search.name]: Search,
        [SwipeItem.name]: SwipeItem,
        [Swipe.name]: Swipe,
        [NoticeBar.name]: NoticeBar,
        [Skeleton.name]: Skeleton,
        [VanImage.name]: VanImage,
        [loading.name]: loading,
        [Dialog.Component.name]: Dialog.Component,
        [Overlay.name]: Overlay,
        [PasswordInput.name]: PasswordInput,
        [NumberKeyboard.name]: NumberKeyboard,
        [Badge.name]: Badge,
        [Icon.name]: Icon,
    },
    created() {
        this.init();
        const code = this.$route.query.code;
        if (code) {
            sessionStorage.setItem('ac_code', code)
        }
    },

    data() {
        return {
            priceFormat,
            priceFormatInt,
            isShelves: !process.env.VUE_APP_PUT_ON_SHELVES,
            itemName: process.env.VUE_APP_ITEM_NAME,
            isApp: !window?.plus ? true : false,
            isShowTopBtn: false,
            msgNum: 0, //未读消息数量
            current: 0, //product index
            searchValue: "",
            gundongtongzhi: "",
            banner: [],
          currentIndex:0,
            vipData: [],
            show: false,
            showNotify: !!localStorage.getItem('sellerId'),
            searchIcon: require("@/assets/image/index/sousuo.png"),
            vip_zhifu_data: {},
            zijin: {},
            showKeyboard: true,
            show1: false,
            dailyNewArrivalList: [], //新品
            index_homeProject: [],
            index_homeProject_index: 0,
            bonus: "",
            bonus_show: false,
            recomendedStoreShopList: [],
            recomendedStoreProductList: [],
            productList: [], //推荐
            categoryList: [], //分类
            prodctPage: 1, //推荐轮播页数
            scrollTop: 0,
            swiperOptions: {
                slidesPerView: 1.95,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
            },
            swiperOptions2: {
                loop: true,
                // slidesPerView: 3,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
            },
            loading: {
                banner: true,
                list: true,
                product: true,
                newest: true,
                shop: true
            },
            isCn: localStorage.getItem('lang') === 'cn'
        };
    },
    mounted() {
        // this.scrollTop = sessionStorage.getItem("scrollTopCount") || 0;
        // this.$nextTick(() => {
        //     console.log(`scrollTopCount ::->`, +this.scrollTop);
        //     window.scrollTo(0, +this.scrollTop);
        // })
        setTimeout(() => {
            window.addEventListener("scroll", this.handleScroll);
        }, 1000);
    },
    computed: {
      ...mapGetters({
        userInfo: "userInfo"
      }),
        logo() {
            if (this.itemName == 'EShop') {
                return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo-h.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
            }
            return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
        },
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 0, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
        buttonStyle() {
            if (this.itemName === 'ShoppingMall') {
                return {
                    background: '#000000',
                    color: '#fff'
                }
            }
        },
    },
    methods: {
      prev(){
        this.$refs.swiperB.prev();
      },
      next(){
        this.$refs.swiperB.next();
      },
      changeIndex(index) {
        this.$refs.swiperB.swipeTo(index);
      },
        async init() {
            this.requestBanner();
            this.requireRecommendNew()

            this.requestHomeCategory();
            // this.home_sellerGoods();
            this.home_SellerList();
        },
        // 获取推荐/新品
        async requireRecommendNew() {
            /**
             * type 0:每日新品 1:推荐产品 2:热销产品
             */
            if (localStorage.getItem("index_recomendedStoreProductList")) {
                this.recomendedStoreProductList = JSON.parse(localStorage.getItem("index_recomendedStoreProductList"));
                this.loading.product = false;
            }
            if (localStorage.getItem("index_dailyNewArrivalList")) {
                this.dailyNewArrivalList = JSON.parse(localStorage.getItem("index_dailyNewArrivalList"));
                this.loading.newest = false;
            }
            if (localStorage.getItem("index_productList")) {
                this.productList = JSON.parse(localStorage.getItem("index_productList"));
                this.prodctPage = Math.ceil(this.productList.length / 4);
                this.loading.product = false;
            }
            const [recommendRes, dailyNewArrivalRes, recomendedStoreProductRes] = await Promise.all([
                apiGetNewGoods({ pageNum: 1, pageSize: 24, type: 1 }),
                apiGetNewGoods({ pageNum: 1, pageSize: 24, type: 0 }),
                apiGetNewGoods({ pageNum: 1, pageSize: 24, type: 2 })
            ]);

            this.productList = recommendRes.result;
            this.prodctPage = Math.ceil(this.productList.length / 4);
            this.loading.product = false;

            this.dailyNewArrivalList = [...dailyNewArrivalRes.result, ...dailyNewArrivalRes.result];
            this.loading.newest = false;

            this.recomendedStoreProductList = recomendedStoreProductRes.result;
            localStorage.setItem("index_productList", JSON.stringify(this.productList));
            localStorage.setItem("index_dailyNewArrivalList", JSON.stringify(this.dailyNewArrivalList));
            localStorage.setItem("index_recomendedStoreProductList", JSON.stringify(this.recomendedStoreProductList));
        },
        async requestHomeCategory() {
            if (localStorage.getItem("index_categoryList")) {
                this.categoryList = JSON.parse(localStorage.getItem("index_categoryList"));
                this.loading.list = false
            }
            const { pageList } = await apiGetRecommendGoods({ pageNum: 1, pageSize: 20 })
            this.categoryList = pageList;
            this.loading.list = false
            localStorage.setItem("index_categoryList", JSON.stringify(this.categoryList));

        },
      onChange(index){
        this.currentIndex = index;
      },
      checkActiveDot(index) {
        return index === this.currentIndex;// currentIndex为监听的轮播index
      },
        handleBannerJump(item) {
            if (window.plus) {
                window.plus.runtime.openURL(item.link)
            } else {
                window.location.href = item.link
            }
        },
        handleDownload(n) {
            if (this.itemName == 'Shop2u') {
                if (n == 0) {
                    window.location.href = 'https://play.google.com/store/apps/details?id=com.commerce.app'
                } else {
                    window.location.href = 'https://apps.apple.com/my/app/shop2u/id6448880380'
                }
            }
            window.location.href = location.origin + "/app.html?r=" + Math.random()
        },
        // banner
        async requestBanner() {
            if (localStorage.getItem('index_banner')) {
                this.banner = JSON.parse(localStorage.getItem('index_banner'))
                this.loading.banner = false
            }
            try {
                const { result } = await apiGetBannerList({
                    type: 'h5',
                    pageNum: 1,
                    pageSize: 10
                })
                if (result.length === 0) {
                    this.banner = [
                        { imgUrl: require('@/assets/image/index/banner0.png') },
                        { imgUrl: require('@/assets/image/index/banner1.jpg') },
                        { imgUrl: require('@/assets/image/index/banner2.png') }
                    ]
                } else {
                    this.banner = result
                }
            } catch (error) {
                this.banner = [
                    { imgUrl: require('@/assets/image/index/banner0.png') },
                    { imgUrl: require('@/assets/image/index/banner1.jpg') },
                    { imgUrl: require('@/assets/image/index/banner2.png') }
                ]
            }
            localStorage.setItem('index_banner', JSON.stringify(this.banner))
            const Image = document.createElement('img')
            Image.src = this.banner[0].imgUrl
            Image.onload = () => this.loading.banner = false
        },
        home_SellerList() {
            if (localStorage.getItem('index_recomendedStoreShopList')) {
                this.recomendedStoreShopList = JSON.parse(localStorage.getItem('index_recomendedStoreShopList'))
                this.loading.shop = false
            }
            let dataJson = {
                pageNum: 1,
                pageSize: 5,
                isRec: 1,
            };
            getSellerList(dataJson).then((res) => {
                this.recomendedStoreShopList = res.pageList;
                this.loading.shop = false
                localStorage.setItem("index_recomendedStoreShopList", JSON.stringify(this.recomendedStoreShopList));
            });
        },
        home_sellerGoods() {
            let data1 = {
                recTime: Date.now(),
            };
            home_sellerGoods(data1).then((res) => {
                //推荐产品
                this.productList = res.pageList
                this.loading.product = false

                this.prodctPage =
                    this.productList.length > 0 &&
                    Math.ceil(this.productList.length / 4);
            });
            let data2 = {
                newTime: Date.now(),
            };
            home_sellerGoods(data2).then((res) => {
                //新品推荐
                this.dailyNewArrivalList = res.pageList;
                this.loading.newest = false
            });
            home_sellerGoods({}).then((res) => {
                //商品底部
                this.recomendedStoreProductList = res.pageList;
            });
        },

        touzi2() {
            this.$router.push("/invest");
            location.reload();
        },
        touzi(e) {
            document.body.scrollTop = 0;
            // firefox
            document.documentElement.scrollTop = 0;
            this.$router.push("/ProductDetails?projectId=" + e);
        },
        shouyexinxi() {
            shouyexinxi_post({}).then((res) => {
                this.gundongtongzhi = res.announcement.toString();
                this.banner = res.banner;
                this.vipData = res.vip_level;
            });
        },
        handleToTop() {
            scrollTo({
                top: 0,
                left: 0,
                behavior: 'smooth'
            });
        },
        huoquyue() {
            huoquyue_post({}).then((res) => {
                console.log(res);
                this.zijin = res;
            });
        },
        vip_zhifu_list(e) {
            this.show = true;
            this.vip_zhifu_data = e;
        },
        kefutiaozhuan() {
            var url =
                "https://ld.ebvsjbv.site/chat/#/customerServiceH5?lang=" +
                this.$i18n.locale;
            if (localStorage.getItem("token")) {
                url += "&token=" + localStorage.getItem("token");
            }
            window.location.href = url;
        },
        //监听product轮播index
        handleChangeSwiper(index) {
            this.current = index;
        },
        checkActive(index) {
            return index === this.current; // current为监听的轮播index
        },
        //跳转商铺
        jumpShop(item) {
            sessionStorage.removeItem("shopState");
            this.$router.push(`/shop?sellerId=${item.id}&index=0`);
        },
        //跳转商品详情
        openProduct(item) {
            this.$router.push("/CommodityDetails?sellerGoodsId=" + item.id);
        },
      handleJump(index){
        let result
        if(index==='1'){
          result = this.categoryList.filter(item=>item.categoryId === 'ff80808184809ef9018480a905ea000a')
        }else if(index==='2'){
          result = this.categoryList.filter(item=>item.categoryId === 'ff808081877c3f3901877ff4b8db0019')
        }else if(index==='3'){
          result = this.categoryList.filter(item=>item.categoryId === 'ff80808184809ef9018480a8a8ef0008')
        }
        this.openClass(result[0])
      },
        //跳转分类商品
        openClass(item) {
            sessionStorage.removeItem("classificationState");
            const query = {
                categoryId: item.categoryId,
                // className: item.name
            }
            this.$router.push({
                path: "/commodity",
                query
            });
        },
        // 记录滚动条位置
        handleScroll() {
            this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            this.isShowTopBtn = this.scrollTop > 500

        },
      merchantJump(){
        if (this.userInfo?.roletype != 1) {
          // 商家入驻
          let lang = localStorage.getItem("lang") || "en";
          lang = lang.replace(/"/g, "");
          let path = window?.plus ? this.paths[this.itemName] : location.origin + '/'
          const url = `${path}promote/#/?lang=${lang}&avatar=${this.userInfo?.avatar || 1}`
          if (window.plus) {
            plus.runtime.openURL(url)
          } else {
            window.location.href = url
          }
        } else {
          // 商家登陆
          let token = localStorage.getItem("token");
          let lang = localStorage.getItem("lang") || "en";
          let path = window?.plus ? this.paths[this.itemName] : location.origin + '/'
          window.location.href = `${path}www/#/?from=shop&token=${token}&lang=${lang}`
        }
      },
      //收藏商品
      addKeepGoods(item) {
        if (!isLogin()) {
          this.$notifyWarn(this.$t("请先登录"));
          this.$router.push("/login");
          return;
        }

        if (item.isKeep == 1) {
          let dataJson = {
            sellerGoodsId: item.id,
          };
          keepGoodsDel(dataJson).then(() => {
            Toast(this.$t("取消成功"));
            this.init();
          });
        } else {
          let dataJson = {
            sellerGoodsId: item.id,
          };
          keepGoods(dataJson).then(() => {
            Toast(this.$t("收藏成功"));
            this.init();
          });
        }
      },
      addCart(item){
        this.$refs.cartRef.show(item.id)
      }
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
        sessionStorage.setItem('scrollTopCount', this.scrollTop)
    },
    watch: {
        $route: {
            handler: function (to, form) {
                if (form.path == '/language') {
                    this.init()
                }
            },
            deep: true
        }
    },
};
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    background: #fff;
    //padding: 0 15px;
    box-sizing: border-box;
    color: #333333;

  .join_us{
    width: 100%;
    position: relative;
    >img{
      max-width: 100%;
      height: 250px;
      max-height: 250px;
      object-fit: cover;
      object-position: 23% 0%;
    }
    .join_us_text{
      position: absolute;
      left: 60%;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .top_text{
        font-size: 18px;
        color: #333333;
      }
      .yj_text{
        margin: 10px 0;
        font-size: 15px;
        font-weight: bold;
        color: #fa3835;
      }
      .jr_btn{
        padding: 5px 12px;
        border-radius: 20px;
        background-color: #2e2e2e;
        color: #f1ce5a;
        font-size: 14px;
      }

    }
  }

    .search-contain {

        /deep/ .search-placeholder {
            font-size: 12px;
            color: #999999;
        }
    }

    .recommended-store {
        width: 100%;
        margin-top: 15px;

        .store_title {
            color: #333;
            font-size: 14px;
            margin-bottom: 11px;
        }

        .recommended-store-shop-item {
            border: 1px solid rgba(238, 238, 238, 1);
            margin-bottom: 15px;
            border-radius: 4px;

            .top {
                display: flex;
                // justify-content: space-evenly;
                align-items: center;
                padding: 10px;

                .left-img {
                    width: 60px;
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        border-radius: 50%;
                        width: 60px;
                        height: 60px;
                        margin-top: 13px;
                    }
                }

                // .img {
                //   display: inline-block;
                //   // width: 50px;
                //   width: auto;
                //   height: 50px;
                //   border: 1px solid rgba(238, 238, 238, 1);
                // }

                .content {
                    display: flex;
                    flex: 1;
                    // flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 12px;
                    height: 60px;

                    .left {
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        margin-top: 6px;

                        .title {
                            font-size: 14px;
                            font-weight: 500;
                        }

                        .fallow {
                            margin-top: 8px;
                        }

                        p {
                            font-size: 10px;
                            color: #333;
                        }
                    }
                }

                .button {
                    min-width: 71px;
                    height: 17px;
                    padding: 2px 10px;
                    // flex: 0 0 71px;
                    margin-left: 10px;
                    line-height: 17px;
                    border: 1px solid var(--main-color);
                    border-radius: 27px;
                    font-size: 10px;
                    text-align: center;
                    background: #fcf2e2;
                    color: var(--main-color);
                    white-space: nowrap;
                }
            }

            .bottom {
                margin: 0 10px;
                padding: 8px 0;
                font-size: 10px;
                display: flex;
                color: #333333;
                justify-content: space-between;
                border-top: 1px solid #eee;
            }
        }

        .recommended-store-product {
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .recommended-store-product-item {
                width: calc(50% - 15px);
                //border: 1px solid rgba(238, 238, 238, 1);
                margin-bottom: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding: 4px;
                //border-radius: 4px;
                position: relative;

                .img-div {
                    height: 156px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .img {
                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;
                        transform: translateY(1px);
                    }
                }

                .content {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    // padding-left: 10%;
                    margin-top: 10px;

                    .price {
                        color: #D62113;
                        font-size: 15px;
                        font-weight: 600;
                        padding: 0 6px;
                        box-sizing: border-box;
                      margin-bottom: 6px;
                    }

                    p {
                        font-size: 13px;
                        color: #000;
                        margin: 4px 0;
                        padding: 0 6px;
                        box-sizing: border-box;
                    }

                    .describe {
                      margin: 6px 0 15px 0;
                        font-size: 16px;
                      font-weight: bold;
                        color: #606060;
                        width: 100%;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -moz-box-orient: vertical;
                        box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding: 0 6px;
                        box-sizing: border-box;
                    }
                }
              .jg_sc{
                margin-top: 5px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                >div{
                  margin-right: 10px;
                  border: #EDEDED 1px solid;
                  width: 30px;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  ::v-deep .el-icon-shopping-cart-full{
                    font-size: 20px;
                    color: #999999;
                  }
                  ::v-deep .el-icon-star-off{
                    font-size: 20px;
                    color: #999999;
                  }
                  ::v-deep .el-icon-star-on{
                    font-size: 20px;
                    color: #d62014;
                  }
                }
              }
            }
        }
    }



    .banner-product {
        width: 100%;
        margin-top: 21px;
        // filter: drop-shadow(0px 6px 12px rgba(55, 63, 69, 0.1));
        // border-radius: 4px;
        position: relative;

        .swipe-product {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 1px;

            .swipe-product-item {
                width: calc(50% - 15px);
                height: 245px;
                border: 1px solid rgba(238, 238, 238, 1);
                margin-bottom: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding: 6px 4px;
                border-radius: 4px;
                position: relative;

                .img-div {
                    height: 156px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .img {
                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;
                    }
                }

                .content {
                    width: 90%;
                    // padding-left: 10%;
                    padding: 0 6px;

                    .price {
                        color: var(--main-color);
                        font-size: 16px;
                        font-weight: 500;
                    }

                    .sold {
                        font-size: 10px;
                        color: #999;
                    }

                    .describe {
                        font-size: 14px;
                        color: #000;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -moz-box-orient: vertical;
                        box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }

        //指示器
        .indicators {
            position: absolute;
            bottom: 0;
            left: 50%;
            display: flex;
            transform: translateX(-50%);
        }

        .indicator li {
            display: inline;
            width: 12px;
            height: 2px;
            background-color: rgb(93, 91, 88);
            border-radius: 20%;
            opacity: 0.3;
            transition: opacity 0.5s,
                //@animation-duration-fast
                background-color 0.5s; //@animation-duration-fast

            &:not(:last-child) {
                margin-right: 6px;
            }

            &.active {
                background-color: var(--main-color);
                opacity: 1;
            }
        }
    }

    .nav-bar-right {
        display: flex;
        align-items: center;

        .cn-wrap {
            display: flex;
            align-items: center;

            .cn-img {
                height: 22px;
                box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
                border-radius: 50%;
            }

            .down-img {
                height: 7px;
                margin-left: 3px;
            }
        }
    }

    .logo-wrap {
        display: flex;
        align-items: center;
    }

    .logo-img {
        width: auto;
        height: 50px;
    }

    .top_logo_img {
        transform: scaleX(-1) !important;
    }

    .banner-div {
        width: 100%;
        //background: white;
        filter: drop-shadow(0px 6px 12px rgba(55, 63, 69, 0.1));
        border-radius: 4px;
      position: relative;

        .swiper_image {
            width: 100%;
            //border-radius: 10px;
            height: auto;
            max-height: 500px;
        }
      .banner_btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        left: 2%;
        right: 2%;
        .right_btn,.left_btn{
          width: 40px;
          height: 40px;
          background: #ee0a24;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        ::v-deep .van-button__icon{
          font-size: 18px;
        }
      }
      .dot-container{
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        .dot {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #000;
          margin: 0 5px;
          opacity: 0.2;
          transition: opacity 0.3s;
        }

        .active-dot {
          opacity: 1;
          background: #ee0a24 !important;
          width: 18px;
          height: 18px;
        }
      }
      //::v-deep .van-swipe__indicator--active{
      //  background: #ee0a24 !important;
      //  width: 18px;
      //  height: 18px;
      //}
      //::v-deep .van-swipe__indicator{
      //  background: #fff;
      //  align-items: center;
      //}
    }

  .dt_classify{
    padding: 50px 15px;
    .dt_row1{
      width: 100%;
      height: 274px;
      position: relative;
      margin-bottom: 30px;
      img{
        width: 100%;
        height: 100%;
      }
      .comment{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5%;
        right: 5%;
        >div:first-child{
          font-size: 18px;
          font-weight: bold;
        }
        >div:last-child{
          margin-top: 10px;
          color: #606060;
          font-size: 14px;
          display: flex;
          align-items: center;
          img{
            width: 18px;
            margin-left: 5px;
          }
          span{
            color: #d62014;
            font-weight: bold;
            margin-left: 5px;
          }
        }
      }
    }
  }

    .Bar {
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
        border-radius: 54px;

        .Bar-img {
            padding: 8px 9px 7px 10px;
            width: 18px;
            height: 16px;
        }

        .Bar-flex {
            flex: 1;
            margin-right: 18px;
        }
    }

  .daohang_con{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .daohang_title{
      font-size: 22px;
      font-weight: bold;
    }
    img{
      height: 5px;
      margin-top: 10px;
      width: 174px;
    }
  }

    .ks_daohang {
        margin-top: 20px;
        width: 100%;
        //min-height: 130px;
        display: flex;
        // flex-wrap: wrap;
        // justify-content: flex-start;
        align-items: flex-end;
        //background: #FFFFFF;
        // overflow-x: scroll;
        // overflow-y: hidden;
        // scrollbar-width: none;
        // -ms-overflow-style: none;
        // &::-webkit-scrollbar {
        //     display: none;
        // }

        .ks_daohang-item {
            // width: 80px;
            display: flex;
            flex-direction: column;
             //justify-content: center;
             //align-items: center;
            // margin: 0px 8px;

            // &:first-child {
            //     margin-left: 10px;
            // }

            .ks_danghang_img_contain {
                min-width: 165px;
                min-height: 149px;
                // padding: 4px 22px;
                border: 1px solid rgba(238, 238, 238, 1);
                border-radius: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
          .shop_data{
            max-width: 165px !important;
            min-height: 250px;
            justify-content: flex-start;
            .ks_danghang_img{
              max-width: 100%;
              max-height: 110px;
              border-radius: 10px 10px 0 0;
            }
            .ks_daohang-item-text{
              min-height: 18px;
              line-height: 18px;
              font-size: 18px;
              margin-top: 15px;
              margin-bottom: 10px;
            }
          }

            .ks_danghang_img {
                max-width: 90px;
                max-height: 90px;
                display: block;
                //margin: auto;
            }

            .ks_daohang-item-text {
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: 8px;
                font-style: normal;
                font-weight: 600;
                font-size: 14px;
                min-height: 14px;
                line-height: 14px;
                max-width: 90%;
                /* identical to box height */

                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                text-align: center;
                color: #000000;
            }
          .store_info{
            font-weight: 400;
            font-size: 14px;
            color: #606060;
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 6px;
          }
        }
    }

    .touzi-xm {
        margin-top: 15px;
        background: #ffffff;
        border-radius: 4px;
        padding: 15px;
        box-sizing: border-box;
        width: 100%;

        .xm-title {
            font-style: normal;
            font-weight: 600;
            font-size: 16px;

            color: #000000;
        }

        .xm-xinxi {
            margin-top: 15px;
            display: flex;

            .k-n {
                font-style: normal;
                font-weight: 400;
                font-size: 18px;
                /* identical to box height */
                color: #333333;
                //text-align: center;
            }

            .k-title {
                font-style: normal;
                font-weight: 400;
                font-size: 12px;
                //line-height: 14px;
                /* identical to box height */

                //text-align: center;

                color: #999999;
            }

            .xinxi-k1 {
                flex: 1;
            }
        }

        .jindu {
            margin-top: 15px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;

            .jindu-t {
                margin-top: 2px;
                width: 140px;
                height: 8px;
                background: #eeeeee;
                border-radius: 27px;

                .xuanzhong {
                    height: 8px;
                    background: #1552f0;
                    border-radius: 27px;
                }

                .xuanzhong2 {
                    height: 8px;
                    background: #999999;
                    border-radius: 27px;
                }
            }

            .jindu-title {
                width: 140px;
                margin-top: 8px;
                display: flex;
                justify-content: space-between;

                .t1 {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    color: #000000;
                }

                .t2 {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    color: #000000;
                }
            }

            .tj {
                width: 96px;
                height: 36px;
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 36px;
                /* identical to box height, or 114% */

                text-align: center;

                color: #ffffff;

                border-radius: 4px;
            }

            .tj-lan {
                background: #1552f0;
            }

            .tj-hui {
                background: #999999;
            }
        }
    }

    .touzi-zhuanjia {
        //box-sizing: border-box;
        //width: 200px;
        // height: 160px;
        margin-top: 15px;
        text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;

        &::-webkit-scrollbar {
            display: none !important;
        }

        .sanjiao {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -11px;
            width: 0;
            //height: 60px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #ffffff;
            transform: rotate(180deg);
        }

        .sanjiao2 {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -11px;
            width: 0;
            //height: 60px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #e5e8ed;
            transform: rotate(180deg);
        }

        .t1 {
            margin-top: 10px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 16px;
            text-align: center;

            color: var(--main-color);
        }

        .t2 {
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            //line-height: 16px;
            text-align: center;
            color: #333333;
            margin-top: 2px;
        }

        .item-avatar {
            width: 80px;
            // height: 130px;
            margin: 2px auto;
        }

        .zhuanjia-item {
            width: 130px !important;
            border-radius: 4px;
            white-space: nowrap;
            display: inline-block;
            box-sizing: border-box;
            margin-right: 15px;
            position: relative;

            // display: flex;
            // flex-direction: column;
            // justify-content: space-around;
            // align-items: center;
            .img-div {
                width: 130px;
                height: 130px;
                display: flex;
                align-items: center;
                justify-content: center;

                .img {
                    width: auto;
                    height: auto;
                    max-width: 90%;
                    max-height: 90%;
                }
            }
        }

        .zhuanjia-item2 {
            flex: 0 0 120px;
            border-radius: 4px;
            white-space: nowrap;
            display: inline-block;
            box-sizing: border-box;
            margin-right: 15px;
            position: relative;

            .img-div {
                width: 120px;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;

                .img {
                    width: auto;
                    height: auto;
                    max-width: 90%;
                    max-height: 90%;
                }
            }
        }
    }

    .zhuanjia-nr {
        margin-top: 10px;
        background: #ffffff;
        padding: 15px;
        box-sizing: border-box;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #000000;
    }

    .Member-text {
        margin-top: 25px;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #333;
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    //width: 100%;
}

.dingbu {
    position: fixed;
    bottom: 100px;
    right: 10px;
    width: 30px;
    height: 30px;
    transition: all .3s;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zhengti {
    width: 100%;
    max-width: 570px;
    padding: 0 30px;
    //padding-top: 60px;
    box-sizing: border-box;

    .zhengti-top {
        box-sizing: border-box;
        padding: 10px 15px 20px 15px;
        background: #ffffff;
        border-radius: 6px;
        position: relative;

        .zhengt1 {
            display: flex;
            justify-content: center;
            align-items: center;
            font-style: normal;
            font-weight: 400;
            font-size: 17.2866px;
            line-height: 20px;
            text-align: center;

            /* 999 */

            color: #999999;

            img {
                width: 48px;
            }
        }

        .zhengti2 {
            margin-top: 20px;
            font-style: normal;
            font-weight: 600;
            font-size: 28.811px;
            line-height: 34px;
            /* identical to box height */
            text-align: center;
            color: #000000;
        }

        .NewcomerBonus-div {
            margin-top: 20px;
            width: 100%;
            height: 110px;
            position: relative;
        }

        .NewcomerBonus {
            width: 100%;
            height: 100%;
            //height: 92px;
        }

        .s1 {
            position: absolute;
            left: 12px;
            top: 17px;
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 16px;

            color: #ffffff;
        }

        .s2 {
            position: absolute;
            left: 12px;
            bottom: 18px;
            width: 114px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;

            color: #ffffff;
        }

        .s3 {
            position: absolute;
            right: 19px;
            top: 25px;
            font-style: normal;
            font-weight: 600;
            font-size: 24.9695px;
            line-height: 29px;
            color: #000000;
        }

        .s4 {
            position: absolute;
            right: 19px;
            bottom: 23px;
            font-style: normal;
            font-weight: 600;
            font-size: 16.5854px;
            line-height: 19px;
            /* identical to box height, or 112% */

            color: #000000;
        }

        .chakan {
            margin-top: 20px;
            width: 100%;
            height: 44px;
            /* 主题色 */
            background: #1552f0;
            border-radius: 4px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 44px;
            /* identical to box height, or 114% */
            text-align: center;
            color: #ffffff;
        }
    }

    .guanbi {
        width: 24px;
        height: 24px;
        margin-top: 20px;
    }
}

.van-search {
    padding: 0 !important;
    margin-bottom: 15px;

    .van-cell {
        padding: 12px 12px 12px 0 !important;
        height: 44px;
    }
}

/deep/ .van-search__content {
    background: #f6f6f6;

    input::placeholder {
        text-align: start;
        padding-left: calc(23% + 35px);
    }
}

/deep/ .van-field__right-icon {
    width: 100%;
    position: absolute;
    left: -2%;
    top: -10%;
}

.search-placeholder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .search-icon {
        width: 17px;
        height: 17px;
        margin-right: 6px;
    }
}

.home .van-nav-bar__text {
    color: #999999;
}

.home .van-notice-bar {
    background: none;
    height: 36px;
    color: #333333;
}

// .home .van-skeleton__row,
// .van-skeleton__title {
//     background: #b0b0b0;
// }

.home .van-overlay {
    z-index: 1999 !important;
}

.search-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.download_wrap {
    width: 100%;
    padding: 21px 17px 21px 17px;
    background: url(@/assets/image/index/downloadbg.png) no-repeat center / 100% 100%;
    box-sizing: border-box;

    .down_title {
        font-weight: 600;
        font-size: 20px;
        color: #000;
    }

    .sub_title {
        font-weight: 600;
        font-size: 15px;
        color: #000;
    }

    .btns {
        margin-top: 20px;
        display: flex;
        align-items: center;
        min-height: 10px;

        .btn {
            // width: 93px;
            // height: 27px;
            padding: 6px 11px;
            border: 1px solid #000000;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;

            &:nth-child(2) {
                margin-right: 0px;
            }

            img {
                width: 12px;
                height: 14px;
            }

            span {
                font-weight: 600;
                font-size: 10px;
                color: #333;
                margin-left: 6px;
            }
        }
    }
}

/*.van-swipe__indicator{*/

/*  background: rgba(0, 0, 0, 0.4);*/
/*  opacity: 0.6;*/
/*}*/
/*.van-swipe__indicator--active{*/
/*  !*background: #1552F0!important;*!*/
/*  background: rgba(0, 0, 0, 0.6)!important;*/
/*}*/
.distinguish_btn {
    background: var(--main-color) !important;
    color: #fff !important;
}
</style>
